🔹 SCSS 是什麼？

SCSS 是 Sass 的一種語法，可以把它理解成「超進階版的 CSS」。
平常我們寫 CSS 時，可能會覺得：

-樣式重複好多次

-想用變數卻只能複製貼上

-巢狀選擇器超長，讀起來很痛苦

這些問題 SCSS 都能解決！而且最後 SCSS 還是會「編譯」成一般的 CSS，所以瀏覽器完全不用改，照樣能跑。

🔹 SCSS 的特色

1.變數（Variables）

你可以像寫程式一樣，定義顏色或字型大小：

SCSS
$primary-color: #3498db;
$font-size-lg: 20px;

.title {
  color: $primary-color;
  font-size: $font-size-lg;
}

如果設計師改顏色，只要調整一次變數，整站就同步更新。

2.巢狀（Nesting）

不用再寫長長的選擇器：

SCSS
.card {
  padding: 16px;

  .title {
    font-weight: bold;
  }

  .content {
    color: gray;
  }
}

讀起來就像 HTML 的結構，超直觀。

3.Mixin（小工具）

有些樣式常常重複，比如加陰影或響應式排版，可以寫成一個 mixin：

SCSS
@mixin box-shadow($color) {
  box-shadow: 0 2px 8px $color;
}

.card {
  @include box-shadow(rgba(0,0,0,0.2));
}

4.模組化（@use / @import）

你可以把樣式拆成很多檔案，像 button.scss、layout.scss，再在主檔案統一匯入，讓專案更好維護。

🔹 簡單範例

假設我們有一個按鈕樣式：

SCSS
$primary: #2ecc71;

.button {
  background: $primary;
  padding: 10px 20px;
  border-radius: 8px;
  color: white;

  &:hover {
    background: darken($primary, 10%);
  }
}

編譯成 CSS 後會變成：

CSS
.button {
  background: #2ecc71;
  padding: 10px 20px;
  border-radius: 8px;
  color: white;
}
.button:hover {
  background: #27ae60;
}

結論

SCSS 就是讓 CSS「程式化」的一種語法，幫助我們寫出更乾淨、可維護、又高效率的樣式。
不管是團隊合作還是大型專案，SCSS 幾乎是必備技能。